@import '/variable.less';

.home-card {
  // 统一所有卡片的尺寸
  display: inline-flex;
  flex-direction: column;
  width: 330rpx;
  height: 600rpx;
  border-radius: 24rpx; // 增大圆角，更现代
  // 纯白色背景
  background: #ffffff;
  // 简单边框
  border: 4rpx solid #020202;
  overflow: hidden;
  // 简单阴影效果
  box-shadow: 0 10rpx 20rpx rgba(103, 106, 110, 0.61);
  // 过渡动画
  transition: all 0.3s ease;
  
  position: relative;

  &__image {
    // 统一图片尺寸
    width: 330rpx;
    height: 470rpx;
    // 轻微圆角，更精致
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    // 更强的图片边框效果
    border-bottom: 4rpx solid rgba(7, 7, 7, 0.945);
    // 图片阴影效果，增强层次感
    box-shadow: 0 5rpx 12rpx rgba(124, 119, 119, 0.521);
  }

  &__info {
    padding: 24rpx;
    font-weight: 400;
    font-size: 30rpx; // 缩小desc字体
    color: @text-primary; // 白色文字
    // 使用弹性布局确保内容正确排列
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    // 增强文字可读性和高级感
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
  }

  &__tag-group {
    display: flex;
    gap: 12rpx;
    margin-top: 12rpx;
    // 允许标签换行
    flex-wrap: wrap;
    
    .t-tag {
      --td-tag-font-size: 18rpx;
      --td-tag-padding: 4rpx 12rpx;
      --td-tag-border-radius: 12rpx;
      
      // 增强标签视觉效果
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.25);
      transition: all 0.15s ease;
      backdrop-filter: blur(6rpx);
      -webkit-backdrop-filter: blur(6rpx);
      
      &[theme="primary"] {
        --td-tag-bg-color: rgba(21, 206, 203, 0.3);
        --td-tag-text-color: @primary-cyan;
        border: 1rpx solid rgba(21, 206, 203, 0.4);
      }
      
      &[theme="success"] {
        --td-tag-bg-color: rgba(79, 224, 181, 0.3);
        --td-tag-text-color: @primary-green;
        border: 1rpx solid rgba(79, 224, 181, 0.4);
      }
      
      &[theme="warning"] {
        --td-tag-bg-color: rgba(255, 165, 0, 0.3);
        --td-tag-text-color: #ffa500;
        border: 1rpx solid rgba(255, 165, 0, 0.4);
      }
      
      &[theme="danger"] {
        --td-tag-bg-color: rgba(221, 255, 71, 0.4);
        --td-tag-text-color: #e6d705;
        border: 1rpx solid rgba(221, 255, 71, 0.4);
      }
      
      &[variant="light"] {
        --td-tag-bg-color: rgba(255, 255, 255, 0.2);
        --td-tag-text-color: @text-secondary;
        border: 1rpx solid rgba(255, 255, 255, 0.2);
      }
    }
  }

  // 鼠标悬浮效果（更明显的交互反馈）
  // &:hover {
  //   // 更强的辉光和边框效果
  //   &::before {
  //     opacity: 0.8; // 增强辉光亮度
  //     filter: blur(14rpx); // 增大模糊范围
  //     transform: scale(1.03); // 轻微放大辉光
  //   }
    
  //   &::after {
  //     opacity: 1; // 显示亮色边框
  //   }
    
  //   // 卡片升起效果，移除缩放
  //   transform: translateY(-10rpx);
  //   // 更强的白色悬浮阴影
  //   box-shadow: 0 16rpx 48rpx rgba(255, 255, 255, 0.2), 0 0 24rpx rgba(255, 255, 255, 0.4);
    
  //   // 增强边框可见度
  //   border-color: rgba(21, 206, 203, 0.6);
  // }
  
  // 点击效果 - 更强的反馈
  &:active {
    // 按下效果，保留缩放
    transform: translateY(-3rpx) scale(0.98);
    
    // 更强的内发光效果
    box-shadow: inset 0 0 24rpx rgba(21, 206, 203, 0.3), 
                0 8rpx 24rpx rgba(255, 255, 255, 0.2), 
                0 0 30rpx rgba(79, 224, 181, 0.5);
    
    // 点击时边框变为主题色
    border-color: @primary-green;
    
    &::before {
      opacity: 0.9;
      transform: scale(1.02);
    }
  }
  
  // 不同类型的卡片样式
  &.custom {
    border: 1.5rpx solid rgba(79, 224, 181, 0.8);
    
    &::before {
      opacity: 0.6;
    }
    
    &::after {
      opacity: 0.6;
    }
  }
}
